import React from 'react'
import {Typography,ConfigProvider,Slider} from 'antd'
import { SmileOutlined } from '@ant-design/icons';
import zh_CN from 'antd/es/locale/zh_CN';
const {Title,Text,Link}=Typography
const {Paragraph}=Typography

export default class Typography_demo extends React.Component{
    state={
        str:"可编辑文本",
        rows:1,
    }
    renderText(){
        return (
            <div>
                <h1>文本：</h1>
                <Title>h1标题</Title>
                <Title level={2}>h2标题</Title>
                <Text>普通文本</Text><br/>
                <Text type="secondary">secondary次要文本</Text><br/>
                <Text type="warning">warning警告提示</Text><br/>
                <Text type="danger">danger危险提示</Text><br/>
                <Text disabled>disabled不可点</Text><br/>
                <Text mark>mark马克</Text><br/>
                <Text code>code代码</Text><br/>
                <Text keyboard>keyboard立体</Text><br/>
                <Text underline>underline下划线</Text><br/>
                <Text delete>delete删除</Text><br/>
                <Text strong>strong加粗</Text><br/>
                <Link href="http://www.baidu.com/" target="_blank">跳转到百度</Link><br/>
                <hr/>
            </div>
        )
    }
    renderBianjiText(){
        const {str}=this.state
        return (
            <div>
                <h1>可编辑和复制文本：</h1>
                <Paragraph editable={{onChange:this.onChange.bind(this)}}>{str}</Paragraph>
                <Paragraph copyable>可复制的文本</Paragraph>
                <Paragraph copyable={{text:'这个才是复制的文本'}}>复制内部文本</Paragraph>
                <Paragraph copyable={{icon:<SmileOutlined/>}}>可复制的文本1</Paragraph>
                <hr/>
            </div>
        )
    }
    renderText2(){
        return (
            <div>
                <h1>长文本省略</h1>
                <Paragraph ellipsis>这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本</Paragraph>
                <Paragraph ellipsis={{rows:1,expandable:true,symbol:'更多'}}>这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本</Paragraph>
                <hr/>
            </div>
        )
    }
    renderSlider(){
        const {rows}=this.state
        return (
            <div>
                <Slider value={rows} min={1} max={10} onChange={this.onChange1} />
                <br/>
            </div>
        )
    }
    renderText3(){
        const article='这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本这是长文本'
        return (
            <div>
                <Paragraph ellipsis={{
                    rows:1,expandable:true,suffix:'最后文字',onEllipsis:ellipsis=>{
                        console.log(ellipsis)
                    },
                }} title={`${article}最后文字`}>{article}</Paragraph>
                <br/>
            </div>
        )
    }
    render(){
        return (
            <ConfigProvider locale={zh_CN}>
                <div>
                    {this.renderText()}
                    {this.renderBianjiText()}
                    {this.renderText2()}
                    {this.renderSlider()}
                    {this.renderText3()}
                </div>
            </ConfigProvider>
        )
    }
    onChange=(str)=>{
        console.log(str)
        this.setState({str})
    }
    onChange1=rows=>{
        this.setState({rows});
    }
}